<template>
  <RecordSearchCom></RecordSearchCom>

  <el-table
    v-loading="recordListLoading"
    :data="recordList.arr"
    stripe
    highlight-current-row
    max-height="480"
    border
  >
    <el-table-column prop="id" label="数据编号"></el-table-column>
    <el-table-column prop="temperature" label="温度(℃)" width="100"></el-table-column>
    <el-table-column prop="pressure" label="压力(MPa)"></el-table-column>
    <el-table-column prop="oilPressure" label="油压(MPa)"></el-table-column>
    <el-table-column prop="casingPressure" label="套压(MPa)"></el-table-column>
    <el-table-column prop="diffPressure" label="差压(Pa)"></el-table-column>
    <el-table-column prop="flow" label="瞬时流量(m³/h)"></el-table-column>
    <el-table-column prop="totalFlow" label="日累计流量(m³/d)"></el-table-column>
    <el-table-column prop="recordTime" label="记录时间" width="200"></el-table-column>
  </el-table>

  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :total="total"
    :page-sizes="[9, 12, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :background="true"
    class="pagination"
    @change="getRecordList"
  />
</template>
<script setup name="RecordManagePage">
import { onMounted } from 'vue'
import RecordSearchCom from '../components/RecordSearchCom.vue'
import { useRecord } from '../hooks/useRecord'
import { usePipeline } from '../hooks/usePipeline'
const { recordListLoading, recordList, currentPage, pageSize, total, getRecordList } = useRecord()
const { getPipelinesWithStation } = usePipeline()
onMounted(async () => {
  await getPipelinesWithStation()
  getRecordList()
})
</script>
<style lang="less" scoped>
.pagination {
  margin-top: 10px;
}
</style>
